<!--  -->
<template>
  <div class="app-container">
    <el-form :inline="true" size="small">
      <el-form-item label="商品编号">
        <el-input
          v-model="kwd1"
          placeholder="请输入账号编号"
          size="small"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input
          v-model="kwd2"
          placeholder="请输入账号名称"
          size="small"
        ></el-input>
      </el-form-item>

      <el-button icon="el-icon-search" type="primary" size="small" @click
        >搜索</el-button
      >
      <el-button icon="el-icon-refresh" size="small" @click>重置</el-button>
      
      <el-button icon="el-icon-delete" type="danger" size="small" @click
        >删除</el-button
      >
      <el-button icon="el-icon-upload" type="primary" size="small" @click
        >导出</el-button
      >

      <el-button
        class="ref-btn"
        icon="el-icon-refresh"
        circle
        @click
      ></el-button>
    </el-form>
    <el-table :data="tableData" border stripe>
      <el-table-column
        type="selection"
        align="center"
        width="60">
      </el-table-column>
      
      <template v-for="(i, index) in columns">
        <el-table-column
          :prop="i.data"
          :key="i.id"
          :label="i.label"
          align="center"
          :width="i.width"
        />
      </template>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-search" @click="edit(scope.row)"
            >查看</el-button
          >
          <el-button
            type="text"
            icon="el-icon-delete"
            style="color: #f66"
            @click="del(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="showDialog"
      width="40%"
      @close="showDialog = false"
    >
     <div class="dBox">
        <div class="dList">
          <div class="dLabel">预约编号</div>
          <div class="dCon">12834748573837</div>
        </div>
         <div class="dList">
          <div class="dLabel">预约手机号</div>
          <div class="dCon">17678013824</div>
        </div>
         <div class="dList">
          <div class="dLabel">预约门店</div>
          <div class="dCon">门店名称</div>
        </div>
         <div class="dList">
          <div class="dLabel">预约类型</div>
          <div class="dCon">门店自提</div>
        </div>
         <div class="dList">
          <div class="dLabel">预约时间</div>
          <div class="dCon">2021-03-29 11:00:02</div>
        </div>
         <div class="dList">
          <div class="dLabel">服务金额</div>
          <div class="dCon">198元</div>
        </div>
         <div class="dList">
          <div class="dLabel">订单状态</div>
          <div class="dCon">已核销</div>
        </div>

     </div>

      <span slot="footer">
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "slider",
  data() {
    return {
      kwd1: "",
      kwd2: "",
      dialogTitle: "创建",
      showDialog: false,
      form: {
        subTime: "",
        subShop: "",
        subCount: "",
        subPayment: "",
      },
      options: [
        {
          value: 1,
          label: "支付方式1",
        },
        {
          value: 2,
          label: "支付方式2",
        },
      ],
      tableData: [
        {
          id: "1",
          phone: "2021-02-21",
          shop: "门店1",
          type: 1,
          time: 20,
          money:'322',
          status:'已核销'
        },
        {
          id: "2",
          phone: "2021-02-21",
          shop: "门店1",
          type: 1,
          time: 20,
          money:'211',
          status:'未核销'
        },
        {
          id: "3",
          phone: "2021-02-21",
          shop: "门店1",
          type: 1,
          time: 20,
          money:'133',
          status:'已核销'
        },
      ],
      columns: [
        { key: 0, label: `预约编号`, data: "id"  },
        { key: 1, label: `预约手机号`, data: "phone"  },
        { key: 2, label: `预约门店`, data: "shop"  },
        { key: 3, label: `预约类型`, data: "type"  },
        { key: 4, label: `预约时间`, data: "time"  },
        { key: 4, label: `服务金额`, data: "money"  },
        { key: 4, label: `订单状态`, data: "status"  }
      ],
    };
  },
  created() {},
  methods: {
    add() {
      this.form = {};
      this.showDialog = true;
    },
    edit(i) {
      this.form = {};
      this.showDialog = true;
    },
    del(i, d) {
      this.$confirm("确认删除所选数据？", "确认删除", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData.splice(i, 1);
        })
        .catch(() => {});
    },
  },
};
</script>
<style scoped>
.slideImg {
  width: 140px;
}
</style>
